<!--
 - Author : 003.
 - Date   : 2018/9/26.
 - File   : topbar.vue.
 -->

<template>
  <div class="page-head">
    <div class="pull-left">荔波小七孔景区票务预约系统</div> 
    <div class="pull-right logout"  @click="logout">{{name}}&nbsp; <span>退出</span></div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
      }
    },
    props: {
      name: {
        type: String,
        default: ''
      },
      logout: {
        type: Function,
        default: () => {
        }
      }
    },
    watch: {},
    methods: {},
    components: {
    }
  }

</script>

<style lang="less">
.page-head{
  padding: 20px 30px;
  background: rgba(17, 122, 215, 1);
  color: #fff;
  height: 100px;
  line-height: 60px;
  .pull-left{
    font-size: 32px;
  }
.logout{
  text-align:right;
  cursor: pointer;
  font-size: 24px;
}
}
</style>
